<div class="context-path-select-element">
  <div class="dropdown-select" placeholder="'Enter a docker context'"
       selected-item="$ctrl.selectedContext"
       lookahead-items="$ctrl.contexts"
       handle-input="$ctrl.setContext(input)"
       handle-item-selected="$ctrl.setSelectedContext(datum.value)"
       allow-custom-input="true"
       hide-dropdown="$ctrl.contexts.length <= 0">
    <!-- Icons -->
    <i class="dropdown-select-icon none-icon fa fa-folder-o fa-lg"
       ng-show="$ctrl.isUnknownContext"></i>
    <i class="dropdown-select-icon none-icon fa fa-folder fa-lg" style="color: black;"
       ng-show="!$ctrl.isUnknownContext"></i>
    <i class="dropdown-select-icon fa fa-folder fa-lg"></i>

    <!-- Dropdown menu -->
    <ul class="dropdown-select-menu pull-right" role="menu">
      <li ng-repeat="context in $ctrl.contexts">
        <a ng-click="$ctrl.setSelectedContext(context)"
           ng-if="context">
          <i class="fa fa-folder fa-lg"></i> {{ context }}
        </a>
      </li>
    </ul>
  </div>

  <div style="padding: 10px">
    <div class="co-alert co-alert-danger"
         ng-show="!$ctrl.isValidContext && $ctrl.currentContext">
      Path is an invalid context.
    </div>
  </div>
</div>
